<template>
    <div class="login">
        <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <van-icon name="edit" slot="right" />
        </van-nav-bar>
        
        <van-tabs class="login-tabs">
            <van-tab title="账号密码登陆" index="1">
                <van-cell-group>
                    <van-field
                        v-model="loginForm.username"
                        clearable
                        label="账 号"
                        placeholder="手机号/邮箱/用户名"
                    />

                    <van-field
                        v-model="loginForm.password"
                        :type="passwordType"
                        label="密 码"
                        clearable
                        :icon="passwordIcon"
                        @click-icon="showPasswordHandler"
                        placeholder="请输入6-20位密码!"
                    />
                </van-cell-group>
            </van-tab>

            <van-tab title="手机验证码登陆" index="2">
                <van-cell-group>
                    <van-field
                        v-model="mobileForm.mobile"
                        clearable
                        label="手机号"
                        placeholder="请输入手机号"
                    />
                    <van-field
                        v-model="mobileForm.validCode"
                        center
                        clearable
                        label="手机验证码"
                        placeholder="请输入验证码"
                    >
                        <van-button slot="button" size="small" type="primary">获取验证码</van-button>
                    </van-field>
                </van-cell-group>
            </van-tab>
        </van-tabs>

        <van-row type="flex" justify="center">
            <van-col span="22" style="margin-top: 20px;">
                <van-button type="primary" style="width: 100%;">登录</van-button>
            </van-col>
        </van-row>

        <van-row type="flex" justify="center">
            <van-col span="22" style="margin-top: 20px;">

                <van-row type="flex" justify="space-between">
                    <van-col><router-link to="/register">快速注册</router-link></van-col>
                    <van-col><router-link to="/forget">忘记密码?</router-link></van-col>
                </van-row>

            </van-col>
        </van-row>

        <van-row type="flex" justify="center">
            <van-col style="margin-top: 20px;">
                <van-button type="primary">主要按钮</van-button>
            </van-col>
        </van-row>

        

    </div>
</template>

<script>
    import { isWeixinBrowse } from '@/utils'
    import { NavBar, Row, Col, Icon, CellGroup, Cell, Toast, Tabs, Tab, Field, Button } from 'vant'

    export default {
        name: 'Login',
        components: {
            [NavBar.name]: NavBar,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell,
            [Toast.name]: Toast,
            [Tabs.name]: Tabs,
            [Tab.name]: Tab,
            [Field.name]: Field,
            [Button.name]: Button,
        },
        created() {
            this.title = this.$router.currentRoute.name
        },
        data() {
            return {
                title: null,
                passwordView: false,
                passwordType: 'password',
                passwordIcon: 'password-not-view',
                loginForm: {
                    username: null,
                    password: null,
                },
                mobileForm: {
                    mobile: null,
                    validCode: null
                }
            }
        },
        methods: {
            showPasswordHandler() {
                this.passwordView = !this.passwordView
                if(this.passwordView) {
                    this.passwordType = 'text'
                    this.passwordIcon = 'password-view'
                } else {
                    this.passwordType = 'password'
                    this.passwordIcon = 'password-not-view'
                }
            },
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
                Toast('调查问卷')
            }
        }
    }
</script>
<style lang="scss">
    .login {
        &-tabs{
            .van-hairline--top-bottom::after {
                border-width: 0 0 1px 0;
            }
            .van-tabs__content{
                margin-top: 20px;
            }
            .van-cell:not(:last-child)::after{
                left: 0;
            }
        }
        
    }
    
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
    .login{
        height:100%; 
        background:#fff; 
        position:absolute; 
        width:100%;
    }
</style>